<template>
	<view class="box">
		<z-paging ref="paging" @onRefresh="onRefresh" @query="query" v-model="list"
			empty-view-img="http://cdn.uviewui.com/uview/empty/data.png" :empty-view-style="{'margin-bottom':'100rpx'}">
			<template #top>
				<view class="search">
					<input type="text" placeholder="请输入关键词" placeholder-class="search-ac">
					<image :src="mixiImgUrl + '/static/ss.png'" mode=""></image>
				</view>
				<view class="layout flex-sp">
					<view class="layout-l flex-center">
						筛选
						<u-icon name="arrow-down" color="#84643B" size="12"></u-icon>
					</view>
					<view class="layout-r">添加纪念馆</view>
				</view>
			</template>


			<view class="list">
				<view class="list-item flex-center" v-for="it in list" @click="toPage">
					<view class="list-item-header">
						<view>
							<image src="https://picsum.photos/200/300" mode="aspectFill"></image>
						</view>
					</view>
					<view class="list-item-name">{{it.name || ''}}</view>
					<view class="list-item-address oh">广东佛山</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		memorialIndexHttp
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				list: [],
				params: {
					name: ''
				}
			}
		},
		methods: {
			toPage() {
				uni.navigateTo({
					url: '/pages/memorial-hall/memorial-hall'
				})
			},
			search() {
				this.$refs.paging.reload();
			},
			query(pageNo, pageSize) {
				console.log('触底', pageNo, pageSize)
				//this.onReachBottomReset()
				let token = uni.getStorageSync('token')
				if (!token) return
				this.init(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {
				console.log('下拉刷新')
				//this.reload(true)
			},
			init(pageNo, pageSize) {
				let params = {
					...this.params,
					page: pageNo
				}
				this.loading = true
				console.log('params', params, this.params)

				memorialIndexHttp(params).then(res => {
					//this.$refs.paging.complete([]);
					


					this.$refs.paging.complete(res.data.data);
				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},

			add() {
				uni.navigateTo({
					url: '/pages/genealogy-characters/add'
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #EFE9DD;
	}

	.box {
		padding-top: 30rpx;
	}

	.search {
		width: 686rpx;
		height: 78rpx;
		background: rgba(132, 100, 59, 0.25);
		border-radius: 39rpx;
		margin: 0 auto;
		display: flex;
		box-sizing: border-box;
		padding: 0 10rpx 0 30rpx;
		align-items: center;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		input {
			min-width: 0;
			height: 100%;
			flex: 1;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #84643B;
		}

		.search-ac {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #84643B;
		}

		image {
			width: 66rpx;
			height: 66rpx;
			margin-left: 30rpx;
		}
	}

	.layout {
		width: 686rpx;
		margin: 0 auto;
		margin-bottom: 26rpx;

		.layout-l {
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 28rpx;
			color: #84643B;
		}

		.layout-r {
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 28rpx;
			color: #84643B;
		}
	}

	.list {
		width: 686rpx;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 14rpx;

		.list-item {
			width: 220rpx;
			height: 290rpx;
			background: rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			flex-direction: column;

			.list-item-header {
				width: 126rpx;
				height: 155rpx;
				background: #494844;
				box-sizing: border-box;
				padding: 8rpx;
				margin-bottom: 13rpx;

				&>view {
					width: 100%;
					height: 100%;
					background: #fff;
					box-sizing: border-box;
					padding: 8rpx;

					image {
						width: 126rpx - 32rpx;
						height: 155rpx - 32rpx;
					}
				}
			}

			.list-item-name {
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				text-align: center;
			}

			.list-item-address {
				width: 126rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				text-align: center;
			}
		}
	}
</style>